<template>
  <div>
    <el-card>
      <div slot="header">
        <el-page-header @back="back" content="历史订单"></el-page-header>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="orderId" label="订单编号" width="width">
          </el-table-column>
          <el-table-column prop="parkingSpaceId" label="车位号" width="width">
          </el-table-column>
            <el-table-column prop="batchCode" label="上架批号" width="width">
          </el-table-column>
        
            <el-table-column prop="parkingSpaceId" label="车位号" width="width">
          </el-table-column>
          <el-table-column prop="startDateTime" label="创建时间" width="width">
          </el-table-column>
          <el-table-column prop="payDateTime" label="支付时间" width="width">
          </el-table-column>
          <el-table-column prop="customer" label="客户姓名" width="width">
          </el-table-column>
          <el-table-column prop="state" label="状态" width="width">
            <template slot-scope="scope">
              <el-tag :type="getType(scope.row.state)">{{scope.row.state}}</el-tag>
             </template>
          </el-table-column>
          <el-table-column width="width">
             <template slot-scope="scope">
            <i class="el-icon-d-arrow-right" @click="showDetail(scope.row)"></i>
             </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="width"
     
    >
      <div>
        <el-descriptions title="个人信息" column="1" border class="info-group">
          <el-descriptions-item label="用户名">{{
            currentItem.personName
          }}</el-descriptions-item>

          <el-descriptions-item label="手机号">{{
            currentItem.phone
          }}</el-descriptions-item>
          <el-descriptions-item label="地址">{{
            currentItem.address
          }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions title="车位信息" column="1" border class="info-group">
          <el-descriptions-item label="区域">{{
            currentItem.region
          }}</el-descriptions-item>
          <el-descriptions-item label="车位号">{{
            currentItem.parkingCode
          }}</el-descriptions-item>
          <el-descriptions-item label="类型">{{
            currentItem.type
          }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions title="订单信息" column="1" border class="info-group">
           <el-descriptions-item label="上架批号">{{
             currentItem.batchCode
          }}</el-descriptions-item>
           <el-descriptions-item label="上架备注">{{
             currentItem.batchName
          }}</el-descriptions-item>
          <el-descriptions-item label="订单编号">{{
            currentItem.orderId
          }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{
            currentItem.startDateTime
          }}</el-descriptions-item>
          <el-descriptions-item label="支付时间">{{
            currentItem.payDateTime
          }}</el-descriptions-item>
          <el-descriptions-item label="状态">{{
            currentItem.state
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  methods:{
    back(){
      this.$router.go(-1)
    },
    getType(state){
      let res = ""
      //console.log(state)
      switch(state){
        case '已取消':res = "info";break
        case "待审核":res = "warning";break
        case '已完成':res = 'success';break
        case '待签约':res = 'danger'
      }

      return res
    },
    showDetail(row){

      this.dialogVisible = true
    }
  },
  computed: {
    tableData() {
      for (let i of this.Data) {
        i.startDateTime = dayjs(i.startDateTime).format("YYYY-MM-DD HH:mm:ss");

        if (i.payDateTime == "") i.payDateTime = "----";
        else i.payDateTime = dayjs(i.payDateTime).format("YYYY-MM-DD HH:mm:ss");
      }
      return this.Data;
    },
  },
  data() {
    return {
      dialogVisible:false,
      currentItem: {
        region: "A/南",
        parkingCode: "A-200",
        size: "标准",
        type: "非人防/地上",
        orderId: "A78ASDASD88",
        startDateTime: "1630051656",
        payDateTime: "",
        personName: "王铁柱",
        personIdCode: "33021248473845",
        phone: "1982346756",
        address: "8#201",
        state: "待签约",
        batchCode:'001',
        batchName:'东区热卖',
      },
      //需要以销售编号为主键发起查询进行初始化
      Data: [
        {
          orderId: "A78ASDASD88",
          batchCode:'001',
          batchName:'东区热卖',
          parkingSpaceId: "A-001",
          state: "待审核",
          startDateTime: "1630051656",
          payDateTime: "",
          customer: "大笨猪",
          personId: "33020341232123",
        },
        {
          orderId: "A78ASDASD88",
          parkingSpaceId: "A-001",
          batchCode:'001',
          batchName:'东区热卖',
          state: "待签约",
          startDateTime: "1630051656",
          payDateTime: "",
          customer: "大笨猪",
        },
        {
          orderId: "A78ASDASD88",
          parkingSpaceId: "A-001",
          batchCode:'001',
          batchName:'东区热卖',
          state: "待支付",
          startDateTime: "1630051656",
          payDateTime: "",
          customer: "大笨猪",
        },
        {
          orderId: "A78ASDASD88",
          parkingSpaceId: "A-001",
          batchCode:'001',
          batchName:'东区热卖',
          state: "已完成",
          startDateTime: "1630051656",
          payDateTime: "1630051656",
          customer: "大笨猪",
        },
        {
          orderId: "A78ASDASD88",
          parkingSpaceId: "A-001",
          batchCode:'001',
          batchName:'东区热卖',
          state: "已取消",
          startDateTime: "1630051656",
          payDateTime: "1630051656",
          customer: "大笨猪",
        },
      ],
    };
  },
};
</script>
<style scoped>
.el-card{
  margin-top: 2rem;
}
.info-group{
  margin-bottom: 1rem;
}
</style>